<template>
	<view class="container" v-if="workInfo">
		<u-navbar title-size="34" :title="workInfo.name" back-icon-color="#292940"  title-color="#292940" :border-bottom="false" :custom-back="goBack" placeholder>
		</u-navbar>
		<view v-if="workInfo.type == 1">
			<view class="blind-img" @click="lookImg">
				<image :src="workInfo.file" mode="widthFix"></image>
				<view class="back-img">
					<image class="bg-image" src="../../../static/home/earth-icon.png" mode="widthFix"></image>
					<view class="title">POSTRINGS+</view>
				</view>
			</view>
			<view class="base"></view>
		</view>
		<view class="audio-box" :style="{background:`url(${workInfo.cover}) no-repeat`,'--percent':maxWidth + 'px'}" v-else-if="workInfo.type == 2">
			<view class="backdrop-box">
				<view class="audio-bg" :style="animationState">
					<image class="audio-pic" :src="workInfo.cover" mode="aspectFill"></image>
				</view>
				<image class="audio-img" :src="$playImg" v-if="!isPlaying" @click="palyAudio"></image>
				<image class="audio-img" :src="$playingImg" v-else @click="pauseAudio"></image>
				<view class="play-icon" :class="{'isRotate':isPlaying}"></view>
				<view class="d-flex justify-content-between progress-box align-items-center">
					<view class="progress-time text-right text-888888 fz-24">{{audioPlayTime}}</view>
					<view class="progress-wrap position-relative">
						<view class="progress-left position-absolute" :style="{width: progress +'%' }"> </view>
						<view class="progress-l position-absolute" :style="{left: progress +'%' }"></view>
					</view>
					<view class="progress-time text-right text-888888 fz-24">{{audioTime}}</view>
				</view>
			</view>
		</view>
		<view class="video-box" v-else :style="{'--percent':maxWidth + 'px'}">
			<!-- #ifdef APP-PLUS -->
			<view class="myPic" :style="{background: `url(${workInfo.cover}) no-repeat`}" v-show="!videoShow">
				<view class="maskPic">
					<image src="/static/market/paly-video.png" @click="videoShow = true"></image>
				</view>
			</view>
			<video class="myVideo" :poster="workInfo.cover" v-if="videoShow" autoplay object-fit="contain" :loop="true"
				:src="workInfo.file" :show-fullscreen-btn="false" controls></video>
			<u-mask :show="videoShow" @click="videoShow = false" style="background-color: rgba(0, 0, 0, 1);">
				<view class="warp">
					<image class="closeVideo" src="/static/market/close-circle.png" v-if="videoShow"></image>
				</view>
			</u-mask>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<video class="myVideo" :style="{'--percent':maxWidth + 'px'}" object-fit="contain" :src="workInfo.file" :loop="true"
				controls></video>
			<!-- #endif -->
		</view>
		<view class="content" :class="{'mt-3':workInfo.type != 1,'padding-end': nowTime > workInfo.sTime}">
			<view class="brief-box card-shadow">
				<view class="d-flex align-items-center">
					<image class="me-icon" src="/static/market/certification.png"></image>
					<view class="text-999BA8 fz-24">该作品拥有POSTRINGS数字藏品官方认证</view>
				</view>
				<view class="d-flex align-items-center fz-24">
					<view class="lable">{{workInfo.category.name}}</view>
				</view>
				<view class="text-292940 fz-36 font-weight-600">{{workInfo.name}}</view>
			</view>
			<view class="input-info card-shadow">
				<view class="input-list d-flex justify-content-between fz-28 align-items-center" >
					<view class="text-292940">专辑</view>
					<view class="d-flex justify-content-end align-items-center" @click="toAlbum">
						<view class="album-icon">
							<image src="/static/creation/icon-album.png"></image>
						</view>
						<view class="text-292940 family-cn">{{workInfo.album.name}}</view>
						<view class="more-icon">
							<image src="/static/mine/me-more.png"></image>
						</view>
					</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">发行</view>
					<view class="text-292940 family-cn">{{workInfo.count}}</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center" @click="show= true">
					<view class="text-292940">流通</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="text-292940 family-cn">{{workInfo.sell_user_works_count}}</view>
						<view class="more-icon">
							<image src="/static/mine/me-more.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="input-info card-shadow">
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">合约地址</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="text-292940 family-cn">
							 {{workInfo.nft_address.substr(0,6)}}****{{workInfo.nft_address.substr(-4)}}
						</view>
						<view class="right" @click="copy(workInfo.nft_address)">
							<image src="/static/mine/copy-new-black.png"></image>
						</view>
					</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">链上标识</view>
					<view class="text-292940 family-cn">{{workInfo.token_id}}</view>
				</view>
			</view>
			<view class="author-padding">
				<view class="author-box d-flex justify-content-between align-items-center" :class="{'border':workInfo.min_price_work}">
					<view class="d-flex align-items-center">
						<view class="author">
							<image :src="workInfo.user.avatar || $avatar" mode="aspectFill"></image>
						</view>
						<view>
							<view class="d-flex align-items-center mb-1">
								<view class="text-343A40 fz-30 name-line-1">{{workInfo.user.nickname}}</view>
								<view class="lable author-lable fz-22 text-center">创作者</view>
							</view>
							<view class="d-flex align-items-center">
								<view class="text-999CAA fz-24">
									{{workInfo.user.address.substr(0,6)}}****{{workInfo.user.address.substr(-4)}}
								</view>
								<view class="right" @click="copy(workInfo.user.address)">
									<image src="/static/mine/copy-new.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex justify-content-end align-items-center" @tap="toAuthor(workInfo.user)">
						<view class="#292940">ta的主页</view>
						<view class="more-icon">
							<image src="/static/mine/me-more.png"></image>
						</view>
					</view>
				</view>
				<view class="author-box d-flex justify-content-between align-items-center" v-if="workInfo.min_price_work">
					<view class="d-flex align-items-center">
						<view class="author">
							<image :src="workInfo.min_price_work.user.avatar || $avatar" mode="aspectFill"></image>
						</view>
						<view>
							<view class="d-flex align-items-center mb-1">
								<view class="text-343A40 fz-30">{{workInfo.min_price_work.user.nickname}}</view>
								<view class="lable owner-lable fz-22 text-center">卖家</view>
							</view>
							<view class="d-flex align-items-center">
								<view class="text-999CAA fz-24">
									{{workInfo.min_price_work.user.address.substr(0,6)}}****{{workInfo.min_price_work.user.address.substr(-4)}}
								</view>
								<view class="right" @click="copy(workInfo.min_price_work.user.address)">
									<image src="/static/mine/copy-new.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex justify-content-end align-items-center" @tap="toAuthor(workInfo.min_price_work.user)">
						<view class="#292940">ta的主页</view>
						<view class="more-icon">
							<image src="/static/mine/me-more.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="input-info card-shadow tips-box mb-0">
				<view class="title">购买须知</view>
				<view class="info">为更好服务POSTRINGS+平台的各位用户，POSTRINGS+特此公告数字藏品的二次交易细则。鉴于不同属性的数字艺术的二次交易细则各有不同，请各位用户务必审慎阅读并同意相关规则后进行相应操作，以免造成不必要损失。</view>
				<view class="info">1、依据我国法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作，我们坚决反对数字藏品炒作、场外交易、欺诈，或以任何其他非法、侵权方式使用的违法违规行为，请大家注意甄别上述涉嫌网络欺诈的行为及其相关风险。</view>
				<view class="info">2、数字藏品为虚拟数字商品，购买前请完成实名认证未满20周岁（含）以下人群禁止购买。</view>
				<view class="info">3、本商品一经出售不支持退换。</view>
				<view class="info">4、如您未参与任何活动或获得任何赋能而转让 (出售赠与等)、受让、合成、兑换、持有、使用、处置、销毁相关数字藏品，您授权同意POSTRINGS+平台向活动举办方、赋能提供方、数字藏品发售方等提供您的联系方式、藏品信息、藏品数量、收货地址(如需) 等必要信息。</view>
			</view>
		</view>
		 <view class="bid-label-box d-flex justify-content-end bid-label-bg2" v-if="nowTime >= workInfo.pTime && nowTime <= workInfo.sTime">
			<view class="d-flex justify-content-end align-items-center">
				<view class="text-ffffff fz-28 pr-2 mr-1">距结束</view>
				<u-count-down fontSize="30" separatorSize="30" @end="endEnd"
					:timestamp="getTimeStamp(workInfo.sell_time)" separator-color="#ffffff" color="#4E85FF" >
				</u-count-down>
			</view>
		</view>
		<!-- 未开始 -->
		<view class="bid-label-box d-flex justify-content-end bid-label-bg1" v-if="nowTime < workInfo.pTime">
			<view class="d-flex justify-content-end align-items-center">
				<view class="text-ffffff fz-28 pr-2 mr-1">距开始</view>
				<u-count-down fontSize="30" separatorSize="30" @end="endNot"
					:timestamp="getTimeStamp(workInfo.preorder_time)" separator-color="#ffffff" color="#4E85FF">
				</u-count-down>
			</view>
		</view>
		<view class="btn-box d-flex justify-content-between align-items-center" >
			<view class="delete-box d-flex align-items-end text-292940">
				<span class="fz-36 family-DIN font-weight-600">￥</span>
				<span class="fz-48 family-DIN" v-if="workInfo.min_price_work">{{workInfo.min_price_work.price}}</span>
				<span class="fz-48 family-DIN" v-else-if="workInfo.last_order">{{workInfo.last_order.price}}</span>
				<span class="fz-48 family-DIN" v-else>1.00</span>
			</view>
			<!-- 暂未开始 -->
			<template v-if="nowTime < workInfo.pTime">
				<u-button type="text" class="text-ffffff fz-32 btn-submit btn-style bid-not-bg">暂未开始</u-button>
			</template>
			<!-- 预售开始或公售开始 -->
			<template v-else>
				<template v-if="workInfo.sell_user_works_count == 0 || isSellOut">
					<u-button type="text" class="text-ffffff fz-32 btn-submit btn-style bid-not-bg">已售罄</u-button>
				</template>
				<template v-else>
					<view class="d-flex justify-content-end fast-sell">
						<view type="text" class="text-ffffff fz-32 text-center btn-style" @click="show = true">购买</view>
						<view type="text" class="text-ffffff fz-32 text-center btn-style" @click="preBuy">快速购买</view>
					</view>
				</template>
			</template>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="32" close-icon-pos="top-right" @close="close"
			:closeable="true">
			<view class="popup-box">
				<view class="text-292940 fz-36 tip">商品列表</view>
				<view class="d-flex align-items-center justify-content-between batch-box">
					<view class="d-flex align-items-center">
						<u-checkbox-group @change="checkChange" width="40upx">
							<u-checkbox name="check" activeColor="#292940" size="36" v-model="isCheck"></u-checkbox>
						</u-checkbox-group>
						<span class="text-666978 fz-26 pl-1">仅查看可购商品</span>
					</view>
					<view class="d-flex justify-content-right align-items-center">
						<u-search placeholder="搜索编号" placeholder-color="#CCCDD5" search-icon-color="#999BA8"
							:show-action="false" border-color="#D8D9E1" bg-color="#ffffff" v-model="searchKeyword" @search="search" @clear="clear"></u-search>
						<view class="filter-icon" v-show="sort == 'asc'" @click="sort = 'desc'">
							<image src="/static/market/order-pos.png">
						</view>
						<view class="filter-icon" v-show="sort == 'desc'" @click="sort = 'asc'">
							<image src="/static/market/order-sel.png"></image>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="internet-h" @scrolltolower="scrolltolower" :scroll-top="scrollTop" @scroll="scroll">
					<template v-for="item in splitList">
						<view class="internet d-flex justify-content-between align-items-center" >
							<view class="d-flex align-items-center">
								<view class="text-292940 fz-32 font-DIN">{{workInfo.token_id}}#{{item.no}}</view>
								<template v-if="nowTime < workInfo.pTime">
									<view class="text-999BA8 fz-22 sell-lable sellNo text-center">未开始</view>
								</template>
								<template v-else-if="nowTime < workInfo.sTime">
									<view class="text-FF7875 fz-22 sell-lable lock text-center" v-if="nowTime <= item.uTime">锁定中</view>
									<view class="text-3079FF fz-22 sell-lable sellTo text-center" v-else>预售中</view>
								</template>
								<template v-else>
									<view class="text-3CC935 fz-22 sell-lable selling text-center">寄售中</view> 
								</template>
							 	
							</view>
							<view class="d-flex justify-content-end align-items-center">
								<view class="text-292940 font-DIN">
									<span class="fz-30">￥</span>
									<span class="fz-40" v-if="item.status == 1">--</span>
									<span class="fz-40" v-else>{{item.price}}</span>
								</view>
								<!--未开始的预售  -->
								<template v-if="nowTime < workInfo.pTime">
									<view class="sellNo-bg text-ffffff fz-30 text-center btn">预售</view>
								</template>
								<!--预售中的预售  -->
								<template v-else-if="nowTime < workInfo.sTime">
									<view class="btn ml-75 text-center" v-if="nowTime <= item.uTime">
										<u-count-down fontSize="34" separatorSize="30" :show-hours="false" :show-days="false" @end="refTime"
											:timestamp="getTimeStamp(item.unlock_time)" separator-color="#71727F" color="#666978">
										</u-count-down>
									</view>
									 <view class="sellTo-bg text-ffffff fz-30 text-center btn" v-else @click="preBuyItem(item)">预售</view>
								</template>
								<!--公售后的售卖  -->
								<template v-else>
									<view class="yellow-bg text-ffffff fz-30 text-center btn" @click="buyItem(item)">购买</view>
								</template>
							</view>
						</view>
					</template>
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" class="pb-50"/>
					<u-empty v-show="total === 0 && !moreShow" mode="data"></u-empty>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="isShowBuyAlbum" mode="center" border-radius="16" >
			<view class="album-box">
				<view class="wallet-popup-bg">
					<view class="title text-292940 fz-36 text-center font-weight-600">购买同系列作品</view>
					<view class="text-292940 fz-30 text-center">您需拥有本系列其他作品</view>
					<view class="text-292940 fz-30 text-center">才可参与优先购哦~</view>
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<u-button type="text" class="text-666978 fz-36  btn-style" @click="isShowBuyAlbum = false">取消</u-button>
						<u-button type="text" class="text-ffffff fz-36  btn-style yellow-bg" @click="toAlbum">购买</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="isShowWaitOrder" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="wallet-popup-bg">
					<view class="title text-292940 fz-36 text-center font-weight-600">提示</view>
					<view class="text-292940 fz-30 text-center">您有一个待付款订单，请前往支付</view>
					<!-- <view class="text-292940 fz-30 text-center">确认前往支付吗~</view> -->
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<!-- <u-button type="text" class="text-666978 fz-36  btn-style" @click="createNewOrder">创建订单</u-button> -->
						<u-button type="text" class="text-ffffff fz-36  btn-style yellow-bg" @click="toWaitOrder">去支付</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showVerModal" ref="uModal"  content="确定前往实名认证吗？" show-cancel-button  @confirm="toVer" confirmColor="#00C0FF"></u-modal>
		<u-modal v-model="showOpenWallet" ref="uModal"  content="确定前往开通钱包吗？" show-cancel-button  @confirm="toWallet" confirmColor="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default{
		data (){
			return{
				work_id:'',
				workInfo:null,
				show:false,
				isCheck: false,
				customStyle: { fontSize: '32upx' },
				searchword:'',
				page:1,
				splitList:[],
				total:'',
				searchKeyword:'',
				sort:'asc',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				nowTime:0,
				isSellOut:false,
				progress: '0', //播放进度
				innerAudioContext: '', //音乐控件上下文
				isPlaying: false, //音乐是否播放中
				AudioDuration: '', //音乐时长
				nowPlayTime: '', //音乐当前播放时间、位置
				videoShow:false,//app端是否播放视频
				showVerModal:false,//是否前往实名认证
				showOpenWallet:false,//是否前往开通钱包
				isShowBuyAlbum:false,//是否展示前往系列购买作品
				isShowWaitOrder:false,//是否前往支付旧订单
				nowPayInfo:null,//当前准备购买的作品信息
				oldOrderId:'',//旧待支付订单ID
				maxWidth:''
			}
		},
		onLoad(options) {
			this.work_id = options.work_id
			this.getWorkDetail()
			this.getMarketSells()
			uni.getSystemInfo({
				success: res => {
					this.maxWidth =  res.windowWidth
				}
			})	
		},
		onShow() {
			this.nowTime = new Date().getTime()/ 1000
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			},
			//音乐总时间
			audioTime() {
				if (this.AudioDuration > 0) {
					// 转换为式分秒
					let m = parseInt(this.AudioDuration / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.AudioDuration % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			//音乐当前播放时间
			audioPlayTime() {
				if (this.nowPlayTime > 0) {
					// 转换为时分秒
					let m = parseInt(this.nowPlayTime / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.nowPlayTime % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			animationState() {
				if (this.isPlaying) {
					return 'animation-play-state:running'
				}
				return 'animation-play-state:paused'
			},
			//待付款列表
			waitList(){
				return this.$store.state.wallet.waitList
			},
			api_path(){
				if(this.nowPayInfo && this.nowPayInfo.type == 1){
					return 'wallet/buyOne'
				}
				return 'wallet/buyQuickly'
			}
		},
		watch:{
			sort(val){
				this.getMarketSells(1)
			}
		},
		//监听手机返回
		onBackPress(event) {
			if (this.workInfo.type == 2) {
				this.pauseAudio()
				setTimeout(() => {
					this.innerAudioContext.destroy()
				}, 1)
			}
		},
		methods:{
			//预览图片
			lookImg(){
				if(uni.getSystemInfoSync().platform != 'ios'){
					uni.previewImage({
						urls: [this.workInfo.file],
						longPressActions: {
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			},
			//前往实名认证
			toVer(){
				this.showVerModal = false
				uni.navigateTo({
					url:'/pages/setting/verified'
				})
			},
			//前往开通钱包
			toWallet(){
				this.showOpenWallet = false
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			goBack(){
				if (this.workInfo.type == 2) {
					this.pauseAudio()
					setTimeout(() => {
						this.innerAudioContext.destroy()
					}, 1)
				}
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			//判断是否登录，或者是否是自己的挂售
			isCanBuy(){
				if(!this.USER){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return false
				}
				//未认证，则提示是否前往实名认证
				if(this.USER.status == 0){
					this.showVerModal = true
					return false
				}
				//未开通钱包，则提示是否前往开通钱包
				if(this.USER.wallet_count == 0){
					this.showOpenWallet = true
					return false
				}
				if(this.workInfo.user_id == this.USER.id){
					uni.$u.toast('无法购买自己的藏品')
					return false
				}
				return true
			},
			//刷新时间
			refTime(){
				this.nowTime = new Date().getTime()/ 1000
			},
			//距离结束倒计时归零
			endEnd(){
				this.nowTime = new Date().getTime()/ 1000
				this.getMarketSells(1)
			},
			//距离开始倒计时归零
			endNot(){
				this.nowTime = new Date().getTime()/ 1000
				this.getMarketSells(1)
			},
			//是否提示前往支付订单
			isTips(){
				if(this.waitList.length > 0){
					for(let i of this.waitList){
						// if(i.work_id == this.work_id){
							
						// }
						//当前时间
						let nowTime = parseInt(new Date().getTime() / 1000)
						//订单结束时间
						let endTime = new Date(i.created_at).getTime() / 1000 + 180
						//如果timestamp大于0，则表示订单未过期，提示选择订单支付
						let timestamp = endTime - nowTime
						if(timestamp > 0){
							this.oldOrderId = i.id
							return this.isShowWaitOrder = true
						}
					}
				}
				this.$store.dispatch(this.api_path,this.nowPayInfo).then(res=>{
					this.getOrder()
					this.getMarketSells(1)
					this.show = false
					this.isShowWaitOrder = false
					uni.navigateTo({
						url:`/pages/secondary/mine/order-wait?order_id=${res.data.id}`
					})
				}).catch(error=>{
					this.isShowWaitOrder = false
					if(error.data.code == 311){
						this.isSellOut = true
						this.getMarketSells(1)
					}
				})
			},
			//获取待支付订单
			getOrder(){
				this.$store.dispatch('wallet/order',{status:1}).then(res=>{})
			},
			preBuy(){
				if(this.isCanBuy()){
					if(!this.workInfo.can_pre){
						this.show = false
						return this.isShowBuyAlbum = true
					}
					this.orderBuy()
				}
			},
			preBuyItem(val){
				if(this.isCanBuy()){
					if(!this.workInfo.can_pre){
						this.show = false
						return this.isShowBuyAlbum = true
					}
					this.buyItem(val)
				}
			},
			//快速购买创建订单
			orderBuy(){
				if(this.isCanBuy()){
					this.nowPayInfo = { works_id:this.work_id , type:0 }
					this.isTips()
				}
			},
			//购买创建订单
			buyItem(val){
				if(this.isCanBuy()){
					this.nowPayInfo = { user_works_id:val.id , type:1 }
					this.isTips()
				}
			},
			//创建新订单
			createNewOrder(){
				this.$store.dispatch(this.api_path,this.nowPayInfo).then(res=>{
					this.getOrder()
					this.getMarketSells(1)
					this.show = false
					this.isShowWaitOrder = false
					uni.navigateTo({
						url:`/pages/secondary/mine/order-wait?order_id=${res.data.id}`
					})
				}).catch(error=>{
					this.isShowWaitOrder = false
					if(error.data.code == 311){
						this.isSellOut = true
						this.getMarketSells(1)
					}
				})
			},
			//支付旧订单
			toWaitOrder(){
				this.show = false
				this.isShowWaitOrder = false
				uni.navigateTo({
					url:`/pages/secondary/mine/order-wait?order_id=${this.oldOrderId}`
				})
			},
			//用户点击搜索
			search(){
				this.goTop()
				this.getMarketSells(1)
			},
			//用户点击清除
			clear(){
				this.goTop()
				this.getMarketSells(1)
			},
			//获取市场作品详情
			getWorkDetail(){
				this.$store.dispatch('works/marketShow',{work_id:this.work_id}).then(res=>{
					this.workInfo = res.data
					this.nowTime = new Date().getTime()/ 1000
					let preorder_time = new Date(this.workInfo.preorder_time).getTime()/ 1000
					let sell_time = new Date(this.workInfo.sell_time).getTime()/ 1000
					this.$set(this.workInfo,'pTime',preorder_time)
					this.$set(this.workInfo,'sTime',sell_time)
					if(this.workInfo.type == 2){
						this.createAudioContext()
					}
				})
			},
			//标识列表上拉加载
			scrolltolower(){
				if(!this.moreShow && this.splitList.length < this.total){
					this.page++
					this.getMarketSells()
				}
			},
			//获取作品下售卖列表
			getMarketSells(val){
				if(val == 1){
					this.page = 1
					this.total = ''
					this.splitList = []
					this.goTop()
				}
				let param = {
					can_buy:this.isCheck ? 1 : '',
					work_id:this.work_id,
					page:this.page,
					no:this.searchKeyword,
					sort:this.sort
				}
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('works/marketSells',param).then(res=>{
					for(let i of res.data.data){
						let unlockTime = new Date(i.unlock_time).getTime()/ 1000
						this.$set(i,'uTime',unlockTime)
					}
					if(this.page == 1){
						this.splitList = res.data.data
					}else{
						this.splitList = [...this.splitList,...res.data.data]
					}
					this.total = res.data.total
					if(this.splitList.length == this.total && this.splitList.length > 4){
						this.status = 'nomore'
					}else{
						this.moreShow = false
					}
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//复制钱包地址
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: (data)=> {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			close() {
			
			},
			checkChange(e) {
				this.$nextTick(()=>{
					this.getMarketSells(1)
				})
			},
			//前往专辑
			toAlbum(){
				this.isShowBuyAlbum = false
				uni.navigateTo({
					url:`/pages/secondary/creation/album?name=${this.workInfo.album.name}&id=${this.workInfo.album.id}&user_id=${this.workInfo.album.user_id}`
				})
			},
			//前往作者
			toAuthor(item){
				uni.navigateTo({
					url:`/pages/secondary/market/author?userInfo=${JSON.stringify(item)}`
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				})
			},
			getTimeStamp(time) {
				let timestamp = ''
				let nowTime = parseInt(new Date().getTime() / 1000)
				let endTime = new Date(time).getTime() / 1000
				timestamp = endTime - nowTime
				if (timestamp < 0) {
					timestamp = 0
				}
				return timestamp
			},
			//播放音乐
			palyAudio() {
				this.innerAudioContext.play()
				this.isPlaying = true
			},
			//暂停音乐
			pauseAudio() {
				this.innerAudioContext.pause()
				this.isPlaying = false
			},
			//停止音乐
			stopAudio() {
				this.innerAudioContext.stop()
				this.isPlaying = false
			},
			//创建音频上下文
			createAudioContext() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.workInfo.file
				this.innerAudioContext.onCanplay((e) => {
					this.AudioDuration = Math.floor(this.innerAudioContext.duration)
					this.nowPlayTime = 0
				});
			
				//监听音乐播放
				this.innerAudioContext.onPlay(() => {
					this.isPlaying = true
					console.log('音乐开始播放了');
				});
				//监听音乐暂停
				this.innerAudioContext.onPause(() => {
					this.isPlaying = false
					console.log('音乐暂停了');
				});
				//监听音乐停止
				this.innerAudioContext.onStop(() => {
					this.isPlaying = false
					console.log('音乐停止了');
				});
				//监听音乐自然播放结束
				this.innerAudioContext.onEnded(() => {
					this.nowPlayTime = this.AudioDuration
					this.progress = 100
					this.isPlaying = false
				});
				//监听音乐播放进度更新事件
				this.innerAudioContext.onTimeUpdate(() => {
					this.nowPlayTime = Math.floor(this.innerAudioContext.currentTime)
					this.progress = parseFloat((this.nowPlayTime / this.AudioDuration) * 100)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-icon {
		height: 40upx;
		padding-right: 30upx;
	
		image {
			width: 44upx;
			height: 44upx;
			vertical-align: top;
		}
	}
	.container{
		width: 100%;
		height: 100vh;
		background: #F8F9FB;
	}
	.audio-box{
		/* #ifdef APP-PLUS */
		width: 750upx;
		height: 750upx;
		/* #endif */
		/* #ifdef H5 */
		width: var(--percent);
		height: var(--percent);
		/* #endif */
		overflow: hidden;
		background-size: cover !important;
		.backdrop-box{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			backdrop-filter: blur(20px) !important;
			position: relative;
			.audio-bg{
				width: 750upx;
				height: 750upx;
				background: url('/static/creation/audio-bg.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: rotate360 30s 0s linear infinite;
				.audio-pic{
					width: 400upx;
					height: 400upx;
					border-radius: 50%;
				}
			}
			@keyframes rotate360 {
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.audio-img {
				width: 80upx !important;
				height: 80upx !important;
				position: absolute !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				z-index: 99 !important;
				top: 335upx !important;
			}
			.play-icon {
				width: 100upx;
				height: 260upx;
				background-image: url(/static/creation/audio-icon.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0upx;
				right: 30upx;
				z-index: 90;
				transform-Origin: top;
				transition: 1s;
			}
			
			.isRotate {
				transform-Origin: top;
				transition: 1s;
				transform: rotate(38deg);
			}
			.progress-box {
				box-sizing: border-box;
				height: 80upx;
				position: absolute;
				bottom: 20upx;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 40upx;
				width: 90%;
				padding: 0 35upx;
				.progress-time {
					color: #333447;
				}
				
				.progress-wrap {
					width: 475upx;
					width: 420upx;
					height: 8upx;
					// background: #666978;
					background: #999BA8;
					border-radius: 6upx;
				}
				
				.progress-left {
					height: 8upx;
					background: #292940;
					border-radius: 6upx;
					transition: 0.3s;
				}
				
				.progress-l {
					width: 8upx;
					height: 16upx;
					background: #FFFFFF;
					box-shadow: 0px 0px 6upx 0px #ADB5BD;
					border-radius: 4upx;
					top: -4upx;
					transition: 0.1s;
					/* #ifdef APP-PLUS */
						top: -6upx;
					/* #endif */
				}
			}
		}
	}
	.video-box{
		/* #ifdef APP-PLUS */
		width: 750upx;
		height: 750upx;
		/* #endif */
		/* #ifdef H5 */
		width: var(--percent);
		height: var(--percent);
		/* #endif */
		.myPic {
			width: 100%;
			height: 100%;
			background-size: cover !important;
			background-position: center center !important;
			position: relative;
		
			.maskPic {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-image: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
		
				image {
					width: 80upx;
					height: 80upx;
				}
			}
		}
		.closeVideo {
			width: 60upx !important;
			height: 60upx !important;
			position: fixed;
			bottom: 200upx;
			left: 50%;
			transform: translateX(-50%);
		}
		.myVideo {
			/* #ifdef APP-PLUS */
			width: 750upx;
			height: 750upx;
			position: fixed;
			top: 50%;
			transform: translateY(-60%);
			/* #endif */
			/* #ifdef H5 */
			width: var(--percent);
			height: var(--percent);
			/* #endif */
		}
	}
	.blind-img {
		width: 580upx;
		border-radius: 24upx;
		background: linear-gradient(180deg, #BAB5BA , #3B394A);
		margin: 0 auto;
		margin-top: 42upx;
		transform-style: preserve-3d;
		position: relative;
		animation: run 24s linear infinite;
		padding: 10upx;
		box-sizing: border-box;
		font-size: 0px;
		image {
			width: 100%;
			border-radius: 18upx;
			backface-visibility: hidden;
		}
	
		.back-img {
			position: absolute;
			backface-visibility: hidden;
			left: 10upx;
			top: 10upx;
			bottom: 10upx;
			right: 10upx;
			width: calc(100% - 20upx) !important;
			height: calc(100% - 20upx) !important;
			border-radius: 18upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			transform: rotateY(180deg);
			background: linear-gradient(180deg, #142348 , #141946);
			.bg-image{
				width: 40%;
				margin-bottom: 5%;
			}
			.title{
				display: block;
				width: 100%;
				color: #989fb4;
				font-size: 30upx;
				font-weight: 600;
				text-align: center;
			}
		}
	}
	
	@keyframes run {
		from {
			transform: rotateY(0deg);
		}
	
		to {
			transform: rotateY(360deg);
		}
	}
	
	.base {
		width: 100%;
		height: 210upx;
		background: url('/static/market/base-img.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -30upx;
	}
	.content{
		width: 100%;
		padding: 0upx 24upx 206upx 24upx;
		box-sizing: border-box;
		background: #F8F9FB;
		margin-top: -40upx;
	}
	.padding-end{
		padding: 0upx 24upx 146upx 24upx;
	}
	.input-info {
		width: 100%;
		padding: 0 30upx;
		border-radius: 16upx;
		margin-bottom: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.input-list {
			height: 99upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
			.album-icon{
				width: 28upx;
				height: 28upx;
				margin-right: 8upx;
				image{
					width: 28upx;
					height: 28upx;
				}
			}
			.more-icon{
				width: 28upx;
				height: 28upx;
				margin-left: 10upx;
				image{
					width: 28upx;
					height: 28upx;
				}
			}
			.right {
				width: 32upx;
				height: 32upx;
				margin-left: 14upx;
	
				image {
					width: 32upx;
					height: 32upx;
					vertical-align: top;
				}
			}
		}
	
		.input-list:last-of-type {
			padding-bottom: 0;
			border-bottom: none;
		}
	}
	.tips-box{
		width: 100%;
		padding: 33upx 25upx;
		font-family: PingFangSC-Regular, PingFang SC;
		.title{
			font-size: 30upx;
			color: #292940;
			margin-bottom: 22upx;
		}
		.info{
			font-size: 26upx;
			color: #666978;
			line-height: 38upx;
		}
	}
	.brief-box{
		width: 100%;
		height: 230upx;
		background: #FFFFFF;
		border-radius: 10px;
		padding:34upx 27upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		.me-icon{
			width: 36upx;
			height: 36upx;
			margin-right: 10upx;
		
		}
		.lable{
			display: inline-block;
			height: 40upx;
			line-height: 40upx;
			background: rgba(30, 247, 254, .1);
			border-radius: 20upx 20upx 2upx 20upx;
			color:#00C0FF;
			padding: 0 20upx;
			margin:22upx 20upx 22upx 0;
			image{
				width: 26upx;
				height: 26upx;
				margin-right: 10upx;
			}
		}
		
	}
	.author-padding{
		width: 100%;
		padding: 0 28upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10upx;
		margin-bottom: 20upx;
	}
	.more-icon{
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;
		image{
			width: 28upx;
			height: 28upx;
		}
	}
	.author-box{
		width: 100%;
		height: 164upx;
		.author{
			width: 98upx;
			height: 98upx;
			margin-right: 24upx;
			image{
				width: 98upx;
				height: 98upx;
				border-radius: 50%;
			}
		}
		
		.lable{
			width: 90upx;
			height: 36upx;
			line-height: 32upx;
			border-radius: 4upx 22upx 4upx 22upx;
			margin-left: 10upx;
		}
		.author-lable{
			color:#00C0FF;
			border: 1px solid rgba(0, 192, 255, 0.25);
		}
		.owner-lable{
			color:#687EFF;
			border: 1px solid rgba(104, 126, 255, 0.25);
		}
		.right {
			width: 32upx;
			height: 32upx;
			margin-left: 14upx;
			
			image {
				width: 32upx;
				height: 32upx;
				vertical-align: top;
			}
		}
		
	}
	.border{
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
	}
	.btn-box{
		width: 100%;
		position: fixed;
		padding: 0 26upx 0 24upx;
		box-sizing: border-box;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #FFFFFF;
		height: 122upx;
		.delete-box {
			}
		.btn-style {
			width: 400upx;
			height: 98upx;
			background: #292940;
			border-radius: 49upx;
			margin-right:0;
		}
		
		.fast-sell{
			
			.btn-style{
				width: 220upx;
				height: 88upx !important;
				line-height: 88upx !important;
				margin-left: 16upx;
				border-radius: 88upx;
			}
			.btn-style:nth-of-type(1){
				background: linear-gradient(103deg, #00B2FF 0%, #2AFFDD 100%);
			}
			.btn-style:nth-of-type(2){
				background: linear-gradient(103deg,#7A60FF  0%, #1EF7FE 100%);
			}
		}
		.save-bg {
			background: #292940;
			}
		.bid-bg{
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}	
		.bid-not-bg{
			
			background: linear-gradient(135deg, #D8D9E1 0%, #CCCDD5 100%);
		}
	}
	/deep/.u-close--top-right{
		top:18upx;
	}
	/deep/.u-checkbox__icon-wrap{
		background: #F8F9FB;
	}
	.popup-box {
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		padding: 66upx 0 0;
		box-sizing: border-box;
		.tip {
			line-height: 32upx;
			margin-bottom: 14upx;
			padding: 0 30upx;
			box-sizing: border-box;
		
		}
	
		.popup-title {
			padding-bottom: 21upx;
		}
		.batch-box{
			padding: 26upx 16upx 20upx 30upx;
			box-sizing: border-box;
		}
		/deep/.u-search{
			width: 365upx;
		}
		.filter-icon {
			width: 44upx;
			height: 44upx;
			margin-left: 20upx;
			image {
				width: 44upx;
				height: 44upx;
			}
		}
		
		.sort-box{
			padding: 0 10upx 0 14upx;
			width: 420upx;
			height: 76upx;
			background: #F8F9FB;
			border-radius: 36upx;
			border: 1upx solid #E2E3E3;
			.sort-icon{
				width: 44upx;
				height: 44upx;
				image{
					width: 44upx;
					height: 44upx;
				}
			}
			.sort-item{
				width: 202upx;
				z-index: 10;
				//background: rgba(224,224,224,.3);
			}
			.active{
				width: 202upx;
				height: 62upx;
				background: #FFFFFF;
				box-shadow: 0px 2upx 10upx -6upx rgba(0,0,0,0.08);
				border-radius: 31upx;
				top:5upx;
			}
			.active-left{
				left:6upx;
				transition: 13s;
			}
			.active-right{
				right:10upx;
				transition: 13s;
			}
		}
		.internet-h{
			// min-height: 390upx;
			// max-height: 870upx;
			height: 648upx;
			overflow-y: auto;
		}
		.sell-lable{
			width: 90upx;
			height: 34upx;
			border-radius: 6upx;
			margin-left:10upx;
			line-height: 30upx;
			
		}
		.selling{
			background: #EEFFE7;
			border: 1px solid #A1ECBF;
		}
		.lock{
			background: #FFF1F0;
			border: 1upx solid #FFCCC7;
		}
		.sellNo{
			background: #F5F6F9;
			border: 1upx solid #D8D9E1;
		}
		.sellTo{
			background: rgba(234,241,255,0.65);
			border: 1upx solid #B5CFFF;
		}
		.internet {
			width: 100%;
			padding: 0 26upx 0 30upx;
			box-sizing: border-box;
			height: 108upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
			
		}
		.internet:nth-last-of-type(1){
			border-bottom: none;
			margin-bottom: 20upx;
		}
		.btn{
			width: 158upx;
			height: 56upx;
			line-height: 56upx;
			border-radius: 44upx;
			margin-left: 75upx;
		}
		.ml-75{
			margin-left: 75upx;
		}
		.pt{
			margin-top: 6upx;
		}
	}
	.bid-label-box{
		width: 100%;
		height: 64upx;
		border-radius: 44upx 44upx 2upx 2upx;
		position: fixed;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-right: 11%;
		bottom: 120upx;
		
	}
	.bid-label-bg2{
		background-image: url(/static/home/bid-label-bg2.png);
	}
	.bid-label-bg1{
		// background-image: url(/static/home/bid-label-bg1.png);
		background-image: url(/static/home/bid-label-bg2.png);
	}
	/deep/ .u-countdown-item {
		font-size: 30upx !important;
		font-family: "DIN";
		width: 40upx;
		height: 40upx;
	
	}
	/deep/.u-countdown-colon {
		padding: 0 8upx !important;
	}
	.bid-label-bg2{
			/deep/ .u-countdown-item {
				background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
				color: #3079FF !important;
			}
	}
	.bid-label-bg1{
			/deep/ .u-countdown-item {
				background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
				color: #666978 !important;
			}
	}
	.sellTo-bg{
		background: linear-gradient(143deg, #AD21FF 0%, #009AFF 100%);
	}
	.sellNo-bg{
		background: linear-gradient(135deg, #D8D9E1 0%, #CCCDD5 100%);
	}
	.album-box {
		padding-bottom: 60upx;
		width: 640upx;
		.wallet-popup-logo{
			width: 98upx;
			height: 98upx;
			margin:0 auto 0;
			image{
				width: 98upx;
				height: 98upx;
				vertical-align: top;
			}
		}
		.wallet-popup-bg{
			width: 640upx;
			border-radius: 16upx;
			.title {
				padding-top: 60upx;
				margin-bottom: 30upx;
			}
				
			.popup-btn-box {
				padding: 0 40upx;
				box-sizing: border-box;
				margin-top: 59upx;
				.btn-style {
					width: 440upx;
					height: 88upx;
					background: rgba(216,217,225,0.5);
					border-radius: 49upx;
				}
			}
		}
	}
</style>